<template>
  <div
    class="jianduhu"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="title">人均监督户数</div>
    <div id="jiandu"></div>
  </div>
</template>

<script>
import Bus from "@/plugs/bus";
import { getRenJun } from "@/api/fengzhuanye";
export default {
  name: "JianDu",
  data() {
    return {
      loading: true,
      activeItem: { val: "01", name: "公共卫生" },
      jianduData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    };
  },
  methods: {
    async getData() {
      this.loading = true;
      this.jianduData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
      // try {
      var json = (
        await getRenJun({
          code: this.activeItem.val,
          year: this.$store.state.YEAR,
          areaCode: 131000
        })
      ).data.data;
      // } catch (error) {
      //   var json = [{"orgName":"廊坊市","orgCode":"131000","perCapita":5.14},{"orgName":"安次区","orgCode":"131002","perCapita":37.5},{"orgName":"广阳区","orgCode":"131003","perCapita":28},{"orgName":"固安县","orgCode":"131022","perCapita":10.58},{"orgName":"永清县","orgCode":"131023","perCapita":8.27},{"orgName":"香河县","orgCode":"131024","perCapita":14.71},{"orgName":"大城县","orgCode":"131025","perCapita":1.81},{"orgName":"文安县","orgCode":"131026","perCapita":6.07},{"orgName":"大厂回族自治县","orgCode":"131028","perCapita":14.1},{"orgName":"霸州市","orgCode":"131081","perCapita":4.38},{"orgName":"三河市","orgCode":"131082","perCapita":19.06}]
      // }
      this.loading = false;
      json.forEach(val => {
        switch (val.orgName) {
          case "廊坊市":
            this.jianduData[0] = val.perCapita;
            break;
          case "安次区":
            this.jianduData[1] = val.perCapita;
            break;
          case "广阳区":
            this.jianduData[2] = val.perCapita;
            break;
          case "固安县":
            this.jianduData[3] = val.perCapita;
            break;
          case "永清县":
            this.jianduData[4] = val.perCapita;
            break;
          case "香河县":
            this.jianduData[5] = val.perCapita;
            break;
          case "大城县":
            this.jianduData[7] = val.perCapita;
            break;
          case "文安县":
            this.jianduData[6] = val.perCapita;
            break;
          case "大厂回族自治县":
            this.jianduData[8] = val.perCapita;
            break;
          case "霸州市":
            this.jianduData[9] = val.perCapita;
            break;
          case "三河市":
            this.jianduData[10] = val.perCapita;
            break;
          default:
            break;
        }
      });

      this.init();
    },
    init() {
      this.jiandu = this.drawJianDu();
    },
    drawJianDu() {
      let myChart = this.$echarts.init(document.getElementById("jiandu"));
      var titlename = [
        "市辖区",
        "安次区",
        "广阳区",
        "固安县",
        "永清县",
        "香河县",
        "文安县",
        "大城县",
        "大厂回族自治县",
        "霸州市",
        "三河市"
      ];
      var valdata = this.jianduData;
      var myColor = [
        "#4d85fe",
        "#ec7b37",
        "#f8c52b",
        "#6bca54",
        "#3e61a5",
        "#ea7776",
        "#01c9fd",
        "#d05eb5",
        "#4bab8f",
        "#5f5cd1"
      ];
      let option = {
        grid: {
          left: "10%",
          top: "0%",
          right: "6%",
          bottom: "-2%",
          containLabel: true
        },
        xAxis: {
          show: false
        },
        yAxis: [
          {
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}"
        },
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: valdata,
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: function(params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                }
              }
            },
            label: {
              normal: {
                show: true,
                position: "right",
                color: "#fff"
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      return myChart;
    }
  },
  mounted() {},
  created() {
    this.getData();
    Bus.$on("changeSize", e => {
      this.jiandu.resize();
    });
    Bus.$on("topNavChange", e => {
      this.activeItem = e;
      this.getData();
    });
  }
};
</script>

<style scoped lang="less">
.jianduhu {
  border: 0.0625rem solid #2c4daa;

  .title {
    height: 50rem/16rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20rem/16rem;
    color: #07ccff;
  }

  #jiandu {
    height: calc(100% - 3.125rem);
  }
}
</style>